<template>
  <div class="song-detail">
    <div class="song-detail_progress_circle">
      <div class="circle_progress">
        <van-circle
          v-model:current-rate="sliderTime"
          :rate="10"
          :color="gradientColor"
          :stroke-width="20"
          layer-color="#ebedf0"
          size="75vw"
        />
      </div>
      <div class="circle_cover">
        <img :src="`${currentMusic?.picUrl}?param=600y600`" alt="" />
      </div>
    </div>
    <div class="song-detail_info">
      <div class="song-detail_info_name">{{ currentMusic?.name }}</div>
      <div class="song-detail_info_author">By：{{ currentMusic?.singer }}</div>
      <span class="song-detail_info_lyric">{{ currentLyric.c_text || currentLyric.text }}</span>
    </div>
    <div class="song-detail_controll">
      <van-icon :name="isPlay ? 'pause' : 'play-circle'" @click="controllMusic" />
    </div>
    <div class="song-detail_progress">
      <div class="song-detail_progress_time">{{ musicDurationTime(currentTime * 1000) }}</div>
      <van-slider
        class="song-detail_progress_progress"
        v-model="sliderTime"
        @change="handleSliderChange"
        bar-height="4px"
        active-color="var(--font-active-color)"
      >
        <template #button>
          <div class="song-detail_progress_button"></div>
        </template>
      </van-slider>

      <div class="song-detail_progress_time">{{ musicDurationTime(currentMusic!.duration) }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, ref, watch } from "vue";
import usePlayerStore from "@/store/playerStore";
import { musicDurationTime } from "@/utils/timeHandler";
const { currentFormat, currentTime, currentMusic, currentLyric, stopMusic, isPlay, startMusic, skipMusic } = toRefs(
  usePlayerStore()
);

const sliderTime = ref(0);

watch(
  () => currentFormat.value,
  (newValue) => {
    sliderTime.value = Number(newValue);
  }
);

const controllMusic = () => {
  isPlay.value ? stopMusic.value() : startMusic.value();
};

// 拖动进度
const handleSliderChange = () => {
  skipMusic.value(sliderTime.value);
};
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};
</script>

<style scoped lang="scss">
.song-detail {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  &_progress_circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75vw;
    height: 75vw;
    .circle_progress {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .circle_cover {
      width: 60vw;
      height: 60vw;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  &_info {
    margin: 20px 0;
    text-align: center;
    &_name {
      font-size: 20px;
    }
    &_author {
      margin: 20px 0;
      color: var(--font-light-color);
    }
    &_lyric {
      padding: 4px 5px;
      font-size: 14px;
      background: #eee;
      border-radius: 8px;
      font-weight: 500;
      color: var(--font-color);
    }
  }
  &_controll {
    display: flex;
    width: 40vw;
    color: var(--font-active-color);
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 50px;
  }
  &_progress {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    &_progress {
      flex: 1;
      box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
    }
    &_button {
      position: relative;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 8px #ccf2f4;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: var(--font-active-color);
        transform: scale(0.6);
        border-radius: 50%;
      }
    }
  }
}
</style>
